<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>图片验证码</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/axios.js"></script>
  </head>

  <body>
    <div id="app">
      <header>
        <h1>图片验证码</h1>
      </header>
      <div class="container">
        <form action="" @submit.prevent="">
          <label for="id">账号:</label>
          <input type="text" name="id" />
          <label for="password">密码:</label>
          <input type="password" name="password" />
          <div class="box" v-if="!show">
            <div class="checkbox" @click="startCheck"></div>
            <span>我是人类</span>
          </div>
          <button id="login" type="submit" v-if="show">登录</button>
        </form>
      </div>
      <div class="modal" v-if="showModal">
        <div class="head">
          <h2>请点击所有包含{{ hint }}的图片</h2>
          <p>如果没有，请点击"跳过"</p>
        </div>
        <div class="images">
          <div
            class="image-container"
            v-for="(image, index) in images"
            @click="selectFn(image)"
            :class="{'selected':selected.find(item=>item.path == image.path)}"
          >
            <img :src="image.path" />
          </div>
        </div>
        <div class="footer">
          <img src="images/redo.svg" @click="startCheck" />
          <button id="check-btn" @click="check">
            {{ selected.length == 0 ? "跳过" : '提交'}}
          </button>
        </div>
      </div>
      <div class="toast" v-if="showToast">{{ toastContent }}</div>
    </div>
  </body>

  <script>
    var vm = new Vue({
      el: "#app",
      // TODO: 你可以根据需要添加新的data或computed属性
      data: {
        category: "",
        toastContent: "",
        allImages: [],
        images: [],
        showToast: false,
        showModal: false,
        selected: [],
        show: false,
      },
      created() {
        axios.get("./js/data.json").then((res) => {
          this.allImages = res.data;
        });
      },
      computed: {
        hint() {
          return this.category === 1 ? "果汁" : "猫咪";
        },
      },
      methods: {
        // 展示验证图像模态框，随机选择一个问题类型和九张图片
        selectFn(image) {
          if (this.selected.indexOf(image) == -1) {
            this.selected.push(image);
          } else {
            this.selected = this.selected.filter(
              (item) => item.path != image.path
            );
          }
        },
        startCheck() {
          this.showModal = true;
          this.category = Math.random() > 0.5 ? 1 : 2;
          this.images = pick(
            this.allImages.filter((i) => i.category === this.category),
            9
          );
        },
        // TODO: 请修改以下代码实现用户选择正确与否的判断逻辑，可以添加新的方法
        check() {
          let result = true;

          let trueAll = this.images.filter((item) => item.type);
          if (trueAll.length == this.selected.length) {
            let res = this.selected.filter((item) => item.type);
            result = res.length == trueAll.length ? true : false;
          } else result = false;

          // 根据用户选择的正确与否展示相应的toast
          if (result) {
            this.toastContent = "验证成功";
            this.show = true;
            this.showModal = false;
          } else {
            this.toastContent = "验证失败，请重试";
            this.show = false;
          }
          // 展示提示用户验证情况的Toast
          this.showToast = true;
          setTimeout(() => {
            this.showToast = false;
          }, 1500);
        },
      },
    });

    // 从数组中随机选择指定数量的元素
    function pick(array, number) {
      const s = new Set();
      for (let i = 0; i < number; i++) {
        const num = Math.floor(Math.random() * 20);
        if (s.has(num)) {
          i--;
        } else {
          s.add(num);
        }
      }
      return Array.from(s).map((n) => array[n]);
    }
  </script>
</html>
